<template>
  <view class="container">
    <view class="pay">
      <image
        src="../../static/pay/success.png"
        mode="scaleToFill"
      />
      <view class="payResult">{{ type ? '支付成功' : '预约成功' }}</view>
      <view class="payInfo1" v-if="type">实付  <span class="price">￥68.00</span></view>
      <view class="payInfo2" v-else>商户将为您预留20分钟，过时预约将无效，请您按时到店。</view>
      <view class="payBtn" v-if="type">
        <view class="back">返回首页</view>
        <view class="checkOrder">查看订单</view>
      </view>
    </view>
    <view class="orderInfo">
      <view class="shop">TOP HAIR烫染接发(浦西万达店)</view>
      <view class="info" v-if="type">
        <view>项目：[冰冰艺术发廊] 施华蔻 控油柔顺洗发露 </view>
        <view>数量：1 </view>
        <view>配送方式：到店自提 </view>
        <view>订单编号：20220725162158  </view>
        <view>下单时间：2022-09-20 16:20:52</view>
        <view>实付金额：<span class="price">¥68</span></view>
      </view>
      <view class="info" v-else>
        <view>预约时间：2023-9-22 13:00-14:00 </view>
        <view>预约项目：设计师洗剪吹·资深设计师造型1次 </view>
        <view>预约人数：1人 </view>
        <view>预约人：李四 18859595959</view>
        <view>实付金额：<span class="price">¥68</span></view>
      </view>
    </view>
    <view>
      <view class="check" v-if="!type">
        查看订单
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const type = ref(true)

</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: $body-bc;
  color: $content-color;
  padding: 82rpx 28rpx;
  .pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    image{
      width: 116rpx;
      height: 171rpx;
      margin-bottom: 43rpx;
    }
    .payResult {
      font-family: FZLanTingHeiS-R-GB;
      font-weight: 400;
      font-size: 36rpx;
      color: #00C1FF;
      line-height: 37rpx;
      padding-right: 10rpx;
      margin-bottom: 10rpx;
    }
    .payInfo1 {
      font-family: FZLanTingHeiS-R-GB;
      font-weight: 400;
      font-size: 24rpx;
      color: #3A75C0;
      line-height: 37rpx;
      margin-bottom: 30rpx;
    }
    .payInfo2 {
      font-family: FZLanTingHeiS-R-GB;
      font-weight: 400;
      font-size: 24rpx;
      color: #3A75C0;
      line-height: 37rpx;
      margin: 0 172rpx 30rpx;
      text-align: center;
    }
    .payBtn {
      text-align: center;
      line-height: 70rpx;
      font-family: FZLanTingHeiS-R-GB;
      font-weight: 400;
      font-size: 26rpx;
      color: #00C1FF;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-bottom: 90rpx;
      .back {
        width: 238rpx;
        background: rgba(17,41,89,0);
        border-radius: 15rpx;
        border: 1px solid rgba(0, 193, 255, 0.73);
        box-sizing: border-box;
        margin-right: 42rpx;
      }
      .checkOrder {
        width: 238rpx;
        background: url('../../static/pay/orderBtn.png') center center no-repeat;
        background-size: 100%;
      }

    }
  }
  .orderInfo {
    background: #112959;
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    margin-bottom: 107rpx;
    .shop {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      color: #00C1FF;
      line-height: 37rpx;
      border-bottom: 1px solid #1D4374;
      padding-bottom: 31rpx;
      margin-bottom: 15rpx;
    }
    .info {
      font-family: FZLanTingHeiS-R-GB;
      font-weight: 400;
      font-size: 26rpx;
      color: #3A75C0;
      line-height: 60rpx;
    }
  }
  .price {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 26rpx;
    color: #F25C01;
    line-height: 48rpx;
  }
  .check {
    width: 536rpx;
    height: 80rpx;
    background: url('../../static/pay/order.png') center center no-repeat;
    background-size: 100%;
    text-align: center;
    line-height: 80rpx;
    margin: 0 79rpx;
  }
}
</style>
